import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)


// 导航守卫   =>  (路由守卫)
// 正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航  => 在路由跳转过程中,可以控制路由跳转,也可以取消跳转,还可以重定向

// 有以下三种:
// 全局路由守卫  => 全局前置守卫  全局解析守卫  全局后置钩子
// 路由独享守卫
// 组件内路由守卫



const router = new VueRouter({
  // mode: 'history',
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

// 全局路由守卫 => 通过路由实例配置

// 全局前置守卫 ( 中间件)  => 每次发生路由跳转,均会执行对应的中间件函数(钩子函数) 
// 回调函数有三个参数
// to => 到哪去,要跳转的路由地址
// from => 从哪来, 要离开的路由地址
// next =>  函数
//       next()   进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
//       next(false)   中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
//       next("/home") / next({path:"/home"}) 重定向=>当前的导航被中断，然后进行一个新的导航。
//       

// router.beforeEach(function(to, from,next){
//   console.log("全局前置守卫:1");
//   console.log("from",from);
//   console.log("to",to);
//   next();
// })


// 模拟页面权限 -> 不是你能访问的你就跳不了
/* let checkedkeys = ["/","/login","/404","/home","/pro/list","/banner/list"]; //模拟普通用户的权限列表

router.beforeEach(function(to, from,next){
  console.log("全局前置守卫:2");

  if(checkedkeys.includes(to.path)){
    next();
  }else{
    next(false);
  }
}) */


// 每次跳转,需要判断用户是否登录
let isLogin = true;
let whiteList = ["/login","/404"];

router.beforeEach(function(to, from,next){
  console.log("全局前置守卫:2");

  if(!whiteList.includes(to.path)){ // 不是  /login,/404  => 主页面中的内容
    if(isLogin){ 
      next();
    }else{
      next({path:"/login",query:{ReturnUrl:to.fullPath}})
    }
    
  }else{
    next()
  }

 
})




export default router
